<template>
  <div style="margin-bottom: 20px;">
    <a-input-search placeholder="请输入学校名称搜索" style="width: 320px">
      <template #enterButton>
        <a-button>
          <SearchOutlined type="search"/>
        </a-button>
      </template>
    </a-input-search>
    <a-button type="primary" @click="schoolFormRef.open()">新增</a-button>
  </div>
  <a-table :loading="loading" :columns="columns" :data-source="data" :pagination="pagination" @change="handleChange">
    <template #bodyCell="{ column, record }">
      <template v-if="column.dataIndex === 'bxlx'">
        {{ $filters.dictText(record.bxlx, 'BXLX') }}
      </template>
      <template v-if="column.dataIndex === 'xxbb'">
        {{ $filters.dictText(record.xxbb, 'xxbb') }}
      </template>
      <template v-if="column.dataIndex === 'action'">
        <a-space>
          <a href="javascript:void(0)" @click="schoolFormRef.open(record)">
            <edit-outlined style="margin-right: 5px;"/>
            编辑
          </a>
          <a-divider type="vertical"/>
          <a-popconfirm
            key="remove"
            title="确定删除吗?"
            ok-text="是"
            cancel-text="否"
            @confirm="handleRemove(record)"
          >
            <a href="javascript:void(0)" style="color:red">
              <delete-outlined style="margin-right: 5px;"/>
              删除
            </a>
          </a-popconfirm>
        </a-space>
      </template>
    </template>
  </a-table>
  <school-form ref="schoolFormRef" @ok="loadData"/>
</template>

<script lang="ts" setup>

import { reactive, ref } from 'vue'
import { DeleteOutlined, EditOutlined, SearchOutlined } from '@ant-design/icons-vue'
import { message } from 'ant-design-vue'
import { Pagination } from '@/config/common'

import { removeSchool, getSchools } from '@/api/sys-school'
import SchoolForm from '@/page/system/school/modules/SchoolForm.vue'
import { useStore } from '@/store/store'

const schoolFormRef = ref<InstanceType<typeof SchoolForm>>()
const columns = [
  {
    title: '学校编号',
    dataIndex: 'id'
  },
  {
    title: '学校',
    dataIndex: 'schoolName'
  },
  {
    title: '办校类型',
    dataIndex: 'bxlx'
  },
  {
    title: '学校办别',
    dataIndex: 'xxbb'
  },
  {
    title: '操作',
    dataIndex: 'action',
    width: '300px'
  }
]

const data = ref<any[]>([])

const loading = ref(false)

const pagination = reactive<Pagination>({
  current: 1,
  pageSize: 10,
  total: 0
})

const loadData = () => {
  loading.value = true
  const {
    current,
    pageSize: size
  } = pagination
  getSchools({
    current,
    size
  }, {}).then(res => {
    data.value = res.records
    pagination.total = res.total
  }).finally(() => {
    loading.value = false
  })
}

const handleRemove = (record: any) => {
  removeSchool(record.id).then(() => {
    message.info('删除成功')
    loadData()
  })
}

const handleChange = (page: Pagination) => {
  pagination.current = page.current
  pagination.pageSize = page.pageSize
  loadData()
}

const store = useStore()
store.dispatch('LoadDictData', ['BXLX', 'xxbb'])
loadData()

</script>
